import React, { useEffect, useState } from 'react'
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Modal ,Skeleton} from 'antd';
import { addUser, showUsers,updateUser } from '@/services/userList'
import { message } from 'antd';
// import Skeleton from '@ant-design/pro-skeleton';

export default function CreateOrEdit(props) {
  //表单数据
  const [initialValues, setInitialValues] = useState(undefined)
  //模态框是否显示
  //操作模态框显示隐藏的方法
  //父组件的传递过来的表格的引用，可以用来操作表格，比如刷新表格
  //要编辑的ID，添加的时候用undefined，只有编辑才有值
  const { isModalVisible, isShowModal, actionRef, editId } = props
  //添加或编辑的文字类型
  const type = editId === undefined ? '添加' : '编辑';
  //提交表单，执行编辑或添加
  const handleSubmit=async values=>{
    let res={}
    if(editId===undefined){
      //发送请求，添加用户
      res=await addUser(values)
    }else{
      //发送请求，更新用户
      res=await updateUser(editId,values)
    }
    if(res.status===undefined){
      message.success(`${type}成功`)
      //刷新表格数据
      actionRef.current.reload()
      //关闭模态框
      isShowModal(false)
    }
  }
  
  useEffect(() => {
    const getOneUser = async () => {
      if (editId !== undefined) {
        const res = await showUsers(editId)
        //获取数据之后，修改状态，状态改变，组件重新渲染，骨架屏消失，表单出现
        setInitialValues({
          name: res.name,
          email: res.email
        })
      }
    }
    getOneUser()
  }, [])
  //添加用户
  const createUser = async values => {
    //发送请求，添加用户
    const res = await addUser(values)
    if (res.status === undefined) {
      message.success('添加成功')
      //刷新表格数据
      actionRef.current.reload()
      //关闭模态框
      isShowModal(false)
    }
  }
  return (
    <Modal title={`${type}用户`} visible={isModalVisible}
      onCancel={() => isShowModal(false)} footer={null} destroyOnClose={true}>
      {
        //只有在编辑的情况下，并且要显示的数据还没有返回，才显示骨架屏
        initialValues === undefined && editId !== undefined ? <Skeleton active={true} paragraph={{ rows: 2 }} /> :
          <ProForm
            initialValues={initialValues}
            onFinish={values => handleSubmit(values)}
          >
            <ProFormText
              name="name"
              label="昵称"
              placeholder="请输入名称"
              rules={[
                { required: true, message: '请输入昵称' }
              ]}
            />
            <ProFormText
              name="email"
              label="邮箱"
              placeholder="请输入邮箱"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '邮箱格式不正确' }
              ]}
            />
            {
              //只有添加才显示
              editId !== undefined ? '' :
                <ProFormText.Password
                  name="password"
                  label="密码"
                  placeholder="请输入密码"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { min: 6, message: '密码最小6位' }
                  ]}
                />
            }


          </ProForm>
      }

    </Modal>
  )
}
